
<template>
  <div>
    <ul>
      <li>
        <p>项目名称</p>
        <p>
          <el-input
            v-model="from.proName"
            placeholder="请输入项目名称"
          ></el-input>
        </p>
      </li>
      <li>
        <p>项目难度</p>
        <el-radio-group v-model="from.radio1">
          <el-radio :label="1">难</el-radio>
          <el-radio :label="2">中</el-radio>
          <el-radio :label="2">易</el-radio>
        </el-radio-group>
      </li>
      <li>
        <p>技术栈</p>
        <p>
          <el-input
            v-model="from.proJishu"
            placeholder="多个技术用英文逗号分隔"
          ></el-input>
        </p>
      </li>
      <li>
        <p>团队人数</p>
        <p>
          <el-input
            v-model="from.proTuanduiNum"
            placeholder="团队人数"
          ></el-input>
        </p>
      </li>
      <li>
        <p>是否置顶</p>
        <el-radio-group v-model="from.radio2">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </li>
      <li>
        <p>是否启用</p>
        <el-radio-group v-model="from.radio3">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </li>
    </ul>
    <div id="websiteEditorElem" style="height: 250px"></div>
    <div slot="footer" style="text-align: right" class="dialog-footer">
      <el-button @click="btn(true)" type="text">取消</el-button>
      <el-button @click="btn(false)" type="primary">确认</el-button>
    </div>
  </div>
</template>
 
<script>
import E from "wangeditor";
export default {
  data() {
    return {
      editor: {},
      from: {
        radio1: 1,
        radio2: 1,
        radio3: 1,
        proName: "",
        proJishu: "",
        proTuanduiNum: "",
        html: "",
      },
    };
  },
  mounted() {
    var E = window.wangEditor;
    this.editor = new E("websiteEditorElem");
    this.editor.create();
  },
  methods: {
    btn(state) {
      if (!state) {
        let vm = this.from;
        // proName: "",
        // proJishu: "",
        // proTuanduiNum: "",
        if (!vm.proName && !vm.proJishu && !vm.proTuanduiNum) {
          this.$message.error("请填写完成");
          return;
        }
        this.$set(this.from, "html", this.editor.$txt.html());
        this.$emit("emits", { data: this.from, key: state });
      } else {
        this.$emit("emits", { data: {}, key: state });
        this.from = {};
      }
    },
  },
};
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
  margin-top: 9px;
}
ul li p {
  display: inline-block;
  line-height: 30px;
}
ul li P:first-child {
  margin-right: 10px;
}
.wangEditor-container {
  margin-top: 17px;
}
.text {
  text-align: right;
}
button {
  margin-top: 10px;
  font-size: 17px;
}
</style>